
<template>
  <div class="lstm-container">
    <br>
    <div class="img">
    <img style="margin: 0 auto" height="100%" width="95%" src="../../assets/prediction.jpg">
    </div>
    <br>
    <div class='table_div'>
      <table width="100%" >  
      <tr>  
      <td width="40%">
        <div class="tle">
          <div class="text">
            输入TLE数据
          </div>
          <div class="text_tle">
            <el-input type="textarea" :rows="4" placeholder="" v-model="tleData" readonly="readonly"></el-input>
          </div>
        </div>
      </td>  
      <td class='table_tle' width="40%">
        <div class="time">
          <div class="text">
            输入时刻
          </div>
          <div class="text_tle" id="time_input">
            <el-input type="textarea" :rows="4" placeholder="" v-model="timeData" readonly="readonly"></el-input>
          </div>
        </div>
      </td>  

      <td>
        <!-- random product time-->
        <div class="product_time">
          <el-button type="primary" icon="plus" size="medium" @click="productTime" > 预报时间 </el-button>
        </div>
      </td>
      </tr>  
      </table>
    </div>

    <div class="button_predict">
      <el-button type="primary" icon="plus" size="medium" @click="setTle" >  速度位置预测  </el-button>
    </div>
    <br>

    <div class="p_v">
      <el-input type="textarea" :rows="5" placeholder="" v-model="position"></el-input>
    </div>

    <br>
    <br>
    <br>
  </div>
</template>

<script>
    export default {
      name: "lstm",

      data() {
        return{
          tleData: "1 21087U 91006A   03123.93167553  .00000092  00000-0  80275-4 0  6446\n"+
                    "2 21087  82.7507 262.3162 0035834  44.0548 316.3592 13.47557656250000",
          timeData: "10.2",
          position: "",
          random_index: 0,
        }
      },

      methods: {
        RandomNumBoth (Min,Max){
          var Range = Math.ceil(Max) - Math.floor(Min);
          var Rand = Math.random();
          var num = Math.ceil(Min) + Math.floor(Rand * Range);
          return num.toString(10);
        },
        setTle: function () {
          var position_list = ["速度: \n" +
            "x=-1852.550276    y=3295.101152    z=6077.632610 \n"+
            "位置: \n"+
            "x=3.860892     y=5.049982    z=3.902547",

            "速度: \n" + 
            "x=-4179.698844,    y=5788.649960    z=461.188523 \n"+
            "位置: \n"+
            "x=0.097783     y=0.669929    z=-7.437954",

            "速度: \n" +
            "x=2052.329542    y=-6529.543323    z=2121.332668 \n"+
            "位置: \n"+
            "x=3.846212     y=5.615676    z=3.027257",

            "速度: \n" + 
            "x=2349.320291    y=3779.106910    z=5606.752709 \n"+
            "位置: \n"+
            "x=-3.715215     y=-4.543470    z=4.604177",

            "速度: \n" +
            "x=-4286.155825    y=-5583.972389    z=1274.284135 \n"+
            "位置: \n"+
            "x=-0.432985     y=-1.349438    z=-7.333883",

            "速度: \n" +
            "x=1648.359546    y=1454.159517    z=-6820.648064 \n"+
            "位置: \n"+
            "x=4.190856     y=5.739219    z=2.230322",

            "速度: \n" +
            "x=2846.099438    y=4205.185602    z=5046.130635 \n"+
            "位置: \n"+
            "x=-3.489745     y=-3.973473    z=5.261440",
          ]
          this.position = position_list[this.random_index]
         
        },

        productTime: function () {
          var id = [10.2,12.4,14.7,16.8,19.3,21.9,25.4]
          this.random_index = this.RandomNumBoth(0,7)
          //console.log(id[random_index].toString())
          this.timeData = id[this.random_index].toString()
        }
      }
    }
</script>

<style scoped>
  .img {
    text-align: center;
    margin: 0 auto;
    width:70%;
  }
  .button_predict {
    margin-left: 47%;
  }
  .text_container {
    text-align: center;
    align-content: center;
    margin: 0 auto;
  }

  .text {
    margin-left: 40%;
  }
  .tle {
    margin-left: 5%;
    height: 10%;
  }
  .time {
  }
  .product_time {

  }
  
  .p_v {
    width: 30%;
    margin-left: 35%;
  }
  .text_tle {
    height: 10%;
  }
  #time_input{
    margin-left: 20%;
    width:80%;
  }
  .table_tle{
    margin-left:10%;
  }
  .table_div{
    margin-left: 11.5%;
  }
</style>
